<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丁志远的个人站</title>
    <link rel="stylesheet" href="css/01.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2110110_c64ldf1a7qf.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="css/02gundong.css">
</head>
<body>
    <div class="daohang">
        <div class="daohangleft">
            <p class="text"> 回到顶部<br>Back to top</p>
        </div>
        <div class="daohangright">
            <ul class="yhn">
                <li class="hjk1">技能<br>skill</li>
                <li class="hjk2">日志<br>vlog</li>
                <li class="hjk3">爱好<br>hobby</li>
                <li class="hjk4">基本信息<br>essential information</li>
            </ul>
        </div>
    </div>
    <div class="photo">
        <video class="photo-video" id="header-video" width="1902px"  src="https://bizsec-auth.alicdn.com/a9b5b21ee64d2b47/Qe9k4XSEr4zqvIg7131/0XfTiqI1hGZy3oGe5ep_281245793739___hd.mp4?auth_key=1601643093-0-0-c91e51e04c283170af143fb0c431bf2c"  muted="" loop="" autoplay=""></video>
    </div>
    <div class="yuhua">

    </div>
    <div class="dzy">
        <img src="images/112.png" alt="" style="filter: drop-shadow(0 0 2px red) drop-shadow(0 0 15px red) drop-shadow(0 0 5px red);-webkit-filter: drop-shadow(0 0 2px red) drop-shadow(0 0 15px red) drop-shadow(0 0 5px orange);">
    </div>
    <div class="jbxx">
       <div class="zhuti">
           <div class="past1">
               <div class="tupian">
                   <ul>
                       <li class="qwe">
                           <img src="images/cat-post-3.jpg" alt="">
                           <div class="bg">
                               <p>热爱生活<br>---------------------<br>一起享受生活的乐趣</p>

                           </div>
                       </li>
                       <li class="qwe">
                           <img src="images/cat-post-2.jpg" alt="">
                           <div class="bg">
                               <p>热爱工作<br>---------------------<br>一起创造劳动的价值</p>
                           </div>
                       </li>
                       <li>
                           <img src="images/cat-post-1.jpg" alt="">
                           <div class="bg">
                               <p>热爱美食<br>---------------------<br>一起品尝美食的诱惑</p>
                           </div>
                       </li>
                   </ul>
               </div>
               <div class="daxinxi">
                    <div class="xinxi">
                        <div class="shaohua">
                        <p>踏浪前行风正劲，<br>不负韶华争朝夕。</p>
                        </div>
                        <ul>
                            <li>
                                <span>丁志远</span>
                                <span class="iconfont icon-yonghu"></span>
                            </li>
                            <li>
                                <span>2020年10月4日</span>
                                <span class="iconfont icon-rili"></span>
                            </li>
                            <li>
                                <span>120万浏览</span>
                                <span class="iconfont icon-yanjing"></span>
                            </li>
                            <li>
                                <span>60条留言</span>
                                <span class="iconfont icon-mes"></span>
                            </li>
                        </ul>
                        <div class="asd">
                            <ul>
                                <li>生日：1998年2月2日</li>
                                <li>家乡：安徽阜阳</li>
                                <li>职业：前端工程师</li>
                                <li>喜欢的音乐：《明天过后》</li>
                                <li>喜欢的电影：《千与千寻》</li>
                            </ul>

                        </div>
                    </div>
                    <img src="images/m-blog-1.jpg" alt="">
                    <div class="jieshao">
                        <h2>努力的人运气都不会太差</h2>
                        <p>人是从挫折当中去奋进，从怀念中向往未来，从疾病当中恢复健康，从无知当中变得文明，从极度苦恼当中勇敢救赎，不停的自我救赎，并尽可能的帮助他人。人之优势所在，是必须充满精力自我悔改自我反省自我成长;并非一味的向人抱怨。</p>
                        <button>查看更多</button>
                    </div>
               </div>
               <div class="jieshaoright">
                   <div class="jieshaozhuti">
                        <div class="sousuo">
                            <input type="text" placeholder="搜索帖子">
                            <a href="#"><span class="iconfont icon-search"></span></a>
                        </div>
                        <div class="zhutibottom">
                            <img src="images/头像.jpg" alt="">
                            <h3>丁志远</h3>
                            <h6>淮北师范大学计算机专业大四在读</h6>
                            <a href="#"><span class="iconfont icon-facebook-fill"></span></a>
                            <a href="#"><span class="iconfont icon-weibo"></span></a>
                            <a href="#"><span class="iconfont icon-qq"></span></a>
                            <a href="#"><span class="iconfont icon-gongzhonghao"></span></a>
                            <p>在校期间,我认真学习,勤奋刻苦,热爱生活，努力做好本职工作,在学生会和班级工作中积累了大量的工作经验,促使自己具有良好的身体素质和心理素质。几年来我努力学习专业知识技能,善于从各门课程的基础知识出发,我取得了良好的成绩,这使得我的专业基础扎实,有良好的理论知识背景和较强的动手水平。
                            </p>
                        </div>
                   </div>
                </div>
           </div>
           <div class="datu1">
               <img src="images/山峰.jpg" alt="">
           </div>
           <div class="past2">
               <div class="waikuang">
                   <div class="aihao">
                       <img src="images/AIHAO.png" alt="">
                   </div>
                   <div class="kuang">
                       <div class="paobuwenzi">
                            <h3>跑步</h3>
                            <h6>慢跑 冲刺跑 变速跑 燃脂跑 法特莱克跑</h6>
                            <P>每次跑步都是突破，热爱运动，跑步可以锻炼意志，锻炼身体，喜欢出汗的感觉，可以让自己变得更自律！更坚强！年轻无极限! 青春我代言! </P>
                       </div>
                        <div class="paobu"> 
                            <img src="images/paobu.jpg" alt="">
                        </div>
                   </div>
                   <div class="kuang1">
                       <div class="book">
                            <h3>阅读</h3>
                            <h6>喜爱的作者：余秋雨 路遥<br>喜爱的书籍《平凡的世界》《活着》</h6>
                            <P>阅读可以增加一个人谈吐的质量和深度。读书，可以让你掌握知识，而知识就像呼吸 一样，吐纳之间，可以见人的气质与涵养。读书，在某种程度上，可以让你获得优越感，而优越感某种程度上又是建立自信的一种方式。</P>
                       </div>
                       <div class="reading">
                           <img src="images/dushu.jpg" alt="">

                       </div>
                   </div>
                   <div class="kuang2">
                        <div class="paobuwenzi">
                            <h3>旅行</h3>
                            <h6>喜爱自然景观人文景观</h6>
                            <P>旅游，可以让我们见识到各地的美丽景色和各地的风土人情，增长见识开阔眼界。抛开工作压力，充分释放自己。秀美的风景总能让我们忘却烦心事，精神放松，有益身心健康。 </P>
                        </div>
                        <div class="lvxing"> 
                            <img src="images/lvxing.jpg" alt="">
                        </div>
                   </div>
                   <div class="kuang3">
                    <div class="book">
                         <h3>摄影</h3>
                         <h6>人文摄影 风光摄影</h6>
                         <P>摄影可以凝住瞬间，留住重要时刻。保存幸福、快乐、永久的记忆直到永远。找到日常中的美，能够与生命中重要的人分享你或者是你们的经历。</P>
                    </div>
                    <div class="ceshi3">
                        <img src="images/work-1.jpg" alt="">

                    </div>
                    <div class="ceshi2">
                        <img src="images/image_2.jpg" alt="">

                    </div>
                    <div class="ceshi1">
                        <img src="images/work-6.jpg" alt="">

                    </div>
                    <div class="reading">
                        <img src="images/sheying.jpg" alt="">

                    </div>
                    <div class="ceshi">
                        <img src="images/work-5.jpg" alt="">

                    </div>
                </div>
                <div class="vlog">
                    <div class="sheyingzhan">
                        <img src="images/wodesheyingzhan.png" alt="">
                    </div>
                    <div class="content">
                        <div id="list">
                            <img src="images/20200930-14-1793189200.jpg" alt="">
                            <img src="images/20200930-16--121241411.jpg" alt="">
                            <img src="images/20200930-16--1633497695.jpg" alt="">
                            <img src="images/20200930-16-2139112674.jpg" alt="">
                            <img src="images/1601453732162.jpeg" alt="">
                        </div>
                        <button id="prev"></button>
                        <button id="next"></button>
                        <div id="btns">
                            <span class="current"></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
               </div>
           </div>
           <div class="past3">
               <div class="skill">
                   <img src="images/技能.png" alt="">
               </div>
               <div class="conteb">
                   <ul class="clearfix">
                        <li>
                            <h3>Photoshop</h3>
                            <div class="progress-bar">
                                <div class="progress">
                                </div>
                            </div>
                        </li>
                        <li>
                            <h3>Premiere Pro</h3>
                            <div class="progress-bar1">
                                <div class="progress1">
                                </div>
                            </div>
                        </li>
                       <li>
                            <h3>Lightroom</h3>
                            <div class="progress-bar2">
                                <div class="progress2">
                                </div>
                            </div>
                        </li>
                        <li>
                            <h3>jQuery</h3>
                            <div class="progress-bar3">
                                <div class="progress3">
                                </div>
                            </div>
                        </li>
                        <li>
                            <h3>CSS3</h3>
                            <div class="progress-bar4">
                                <div class="progress4">
                                </div>
                            </div>
                        </li>
                        <li>
                            <h3>html5</h3>
                            <div class="progress-bar5">
                                <div class="progress5">
                                </div>
                            </div>
                        </li>
                   </ul>
               </div>
               <div class="asdzxc">
                   <img src="images/person_1.jpg" alt="">
               </div>
               <div class="jieshuimg">
                   <img src="images/结尾.png" alt="">
               </div>
               <div class="liuyan">
                   <img src="images/留言.png" alt="">
               </div>
               <textarea name="liuyan" id="jkh" cols="30" rows="10">欢迎您留下宝贵的意见！</textarea>
                <div class="yun">
                    <button>提交</button>
                </div>
            </div>
       </div>
    </div>
    <script>
        $(".daohangleft").click(function(){
            $("html").animate({scrollTop:"0px"},1000)
        })
        $(".hjk4").click(function(){
            $("html").animate({scrollTop:"750px"},1000)
        })
        $(".hjk3").click(function(){
            $("html").animate({scrollTop:"1900px"},1000)
        })
        $(".hjk2").click(function(){
            $("html").animate({scrollTop:"3300px"},1000)
        })
        $(".hjk1").click(function(){
            $("html").animate({scrollTop:"4050px"},1000)
        })
        $(function () {
            var index = 0;
            var timer;
            // 1.点击next
            $("#next").click(function () {
                index++;
                if (index > 4) {
                    index = 0;
                }
                animate(index);
            })
            // 2.点击prev
            $("#prev").click(function () {
                index--;
                console.log(index);
                if (index < 0) {
                    index = 4;
                }
                animate(index);
            })
            // 3.焦点随左右按钮变化
            function animate(index) {
                $("#list img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            }
            // 4.点击按钮,让对应的图片出现
            $("#btns span").click(function () {
                $(this).addClass("current").siblings().removeClass("current");
                index = $(this).index();
                $("#list img").eq(index).fadeIn(1000).siblings().fadeOut(1000);

            })
            //5.自动播放
            function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 2000)
            }
            function stop() {
                clearInterval(timer)
            }
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
        })
    </script>
</body>
</html>